<template>
<div>

  <div>函数修饰符</div>

  <button @click="changeLocale('en')">切换成英文</button>
  <button @click="changeLocale('zh')">切换成中文</button>
  <button @click="changeLocale('ru')">切换成俄文</button>

  <div>{{ t('message.hello') }}</div>

  <pre>
    “@”，与其说是修饰函数倒不如说是引用、调用它修饰的函数。
    或者用句大白话描述：@: "下面的被我包围了。"


  </pre>

</div>
</template>

<script lang="ts">

interface ILocale {
  value: string
}

import { i18n } from "@/locales/setupI18n";
let { t, locale } = i18n.global;
import { Vue, } from "vue-class-component";
import { isRef } from 'vue'
export default class I18n extends Vue{
  t = t;
  mounted(): void {
    if (isRef(locale)) {
      locale.value = 'zh'
    }
  }

  changeLocale(lang: string):void {
    if (isRef(locale)) {
      locale.value = lang
    }
  }
}
</script>

<style scoped>

</style>
